<template>
  <div :class="getClass" ref="wrapperRef">
    <div :class="`${prefixCls}-page-header`" v-if="getShowHeader">
      <el-page-header :title="title" :class="{ 'noTitle': noTitleLeft }" v-bind="omit($attrs, 'class')">
        <template #content>
          <template v-if="content">
            {{ content }}
          </template>
          <slot name="headerContent" v-else></slot>
        </template>
        <template #[item]="data" v-for="item in getHeaderSlots">
          <slot :name="item" v-bind="data || {}"></slot>
        </template>
      </el-page-header>
    </div>
    <div class="overflow-hidden" :class="getContentClass" :style="getContentStyle" ref="contentRef">
      <slot></slot>
    </div>

    <PageFooter v-if="getShowFooter" ref="footerRef">
      <template #left>
        <slot name="leftFooter"></slot>
      </template>
      <template #right>
        <slot name="rightFooter"></slot>
      </template>
    </PageFooter>

  </div>
</template>

<script lang="ts" setup >
import { useDesign } from "@/hooks/web/useDesign";
import { propTypes } from "@/utils/propTypes";
import { omit } from "lodash";
import { computed, CSSProperties, PropType, useAttrs, useSlots } from "vue";
import PageFooter from './PageFooter.vue';

const slots = useSlots()
const attrs = useAttrs()
const props = defineProps({
  title: propTypes.string,
  dense: propTypes.bool,
  ghost: propTypes.bool,
  content: propTypes.string,
  noTitleLeft: propTypes.bool,
  contentStyle: {
    type: Object as PropType<CSSProperties>,
  },
  contentBackground: propTypes.bool,
  contentFullHeight: propTypes.bool,
  contentClass: propTypes.string,
  fixedHeight: propTypes.bool,
  upwardSpace: propTypes.oneOfType([propTypes.number, propTypes.string]).def(0),
})
const { prefixCls } = useDesign('page-wrapper');

const getHeaderSlots = computed(() => {
  return Object.keys(omit(slots, 'icon', 'title', 'content'));
});


const getShowFooter = computed(() => slots?.leftFooter || slots?.rightFooter);


const getContentClass = computed(() => {
  const { contentBackground, contentClass } = props;
  return [
    `${prefixCls}-content`,
    contentClass,
    {
      [`${prefixCls}-content-bg`]: contentBackground,
    },
  ];
});
const getContentStyle = computed((): CSSProperties => {
  const { contentFullHeight, contentStyle, fixedHeight } = props;
  if (!contentFullHeight) {
    return { ...contentStyle };
  }

  return {
    ...contentStyle,
  };
});
const getClass = computed(() => {
  return [
    prefixCls,
    {
      [`${prefixCls}--dense`]: props.dense,
    },
    attrs.class ?? {},
  ];
});

const getShowHeader = computed(
  () => props.content || slots?.headerContent || props.title || getHeaderSlots.value.length,
);

</script>

<style lang="scss" scoped>
.gm-page-wrapper-page-header {
  padding: 1.5rem;
  margin: 0.5px;
  background-color: #ffffff;
}

.noTitle {
  :deep(.el-page-header__left) {
    display: none;
  }
}
</style>